<template>
    <div class="wrapper" :style="{width:G.dom.getWidth()+'px'}">
        <div class="profile">
            <div class="big_image">
                <img src="https://qn.diyeetech.com/20181210-184355-7ffbe5c5.jpg?imageView2/2/w/300" alt=""/>
            </div>
            <div class="h1_test">
                <h1>抽象黑夜</h1>
                <small>REN177</small>
            </div>
        </div>
        <div class="buliao_wrapper">
            <div class="label">
                面料:
            </div>
            <div class="buliao_list">
                <div class="item">
                    标准棉布 幅宽1.32米·单价￥80.00
                </div>
                <div class="item">
                    标准棉布 幅宽1.32米·单价￥80.00
                </div>
                <div class="item">
                    标准棉布 幅宽1.32米·单价￥80.00
                </div>
                <div class="item">
                    标准棉布 幅宽1.32米·单价￥80.00
                </div>
                <div class="item">
                    标准棉布 幅宽1.32米·单价￥80.00
                </div>
                <div class="item">
                    标准棉布 幅宽1.32米·单价￥80.00
                </div>
            </div>
        </div>
        <div class="number_wrapper_wrapper">
            <div class="label">数量:</div>
            <div class="number_wrapper">
                <SvgIcon icon="icon-jian" class="icon"></SvgIcon>
                <input class="number" type="number"/>
                <SvgIcon icon="icon-plus" class="icon"></SvgIcon>
            </div>
        </div>
        <div class="buy_it_now_btn">
            立即购买
        </div>
    </div>
</template>
<script>
    import SvgIcon from '../../../components/svgIcon'

    export default {
        components: {
            SvgIcon
        }
    }
</script>
<style lang="less" scoped>
    .wrapper {
        z-index: 999;
        width: 100%;
        max-width: 750px;
        height: px2rem(700);
        .number_wrapper_wrapper {
            display: flex;
            padding-left: px2rem(20);
            padding-right: px2rem(20);
            .label {
                margin-top: 2px;
                width: px2rem(80);
            }
            .number_wrapper {
                display: flex;
                align-items: center;
                .icon {
                    border: 4px solid #ddd;
                    border-radius: 50%;
                    font-size: 25px;
                    padding: 2px;
                }
                .number {
                    padding-left: 5px;
                    border: none;
                    background: #eee;
                    width: px2rem(120);
                    height: px2rem(50);
                }
            }
        }

        .buliao_wrapper {
            padding-left: px2rem(20);
            padding-right: px2rem(20);
            display: flex;
            .label {
                margin-top: 8px;
                width: px2rem(80);
            }
            .buliao_list {
                .item {
                    border: 3px solid #eee;
                    padding: 5px;
                    border-radius: 20px;
                    margin-bottom: 5px;
                }
            }
        }
        .profile {
            .big_image {
                position: fixed;
                top: -50px;
                left: 20px;
                display: flex;
                width: px2rem(200);
                height: px2rem(200);
                img {
                    max-width: 100%;
                    max-height: 100%;
                }
            }

            .h1_test {
                position: relative;
                top: px2rem(-10);
                left: px2rem(280);
            }
        }
        .buy_it_now_btn {
            margin: auto;
            margin-top: 10px;
            width: 3rem;
            height: .36rem;
            background-image: linear-gradient(90deg, #fa8324, #fa2d32);
            border-radius: 36px;
            color: #fff;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>